<template>
  <TopNav :title="metaTitle" />

  <Hero :item="item" v-if="item" />

  <MediaNav :menu="menu" @clicked="navClicked" />

  <template v-if="activeMenu === 'overview'">
    <TvInfo v-if="item" :item="item" />
    <Credits v-if="showCredits" :people="item.credits.cast" />
  </template>

  <template v-if="activeMenu === 'episodes' && showEpisodes">
    <Episodes :number-of-seasons="item.number_of_seasons" />
  </template>

  <template v-if="activeMenu === 'photos' && showImages">
    <Images
      v-if="item.images.backdrops.length"
      title="Backdrops"
      type="backdrop"
      :images="item.images.backdrops"
    />

    <Images
      v-if="item.images.posters.length"
      title="Posters"
      type="poster"
      :images="item.images.posters"
    />
  </template>

  <ListingCarousel
    v-if="recommended && recommended.length"
    title="More Like This"
    :items="recommended"
  />
</template>
<script setup>
import TopNav from "@/components/TopNav.vue";
import Hero from "@/components/Hero.vue";
import MediaNav from "@/components/MediaNav.vue";
import TvInfo from "@/components/TvInfo.vue";
import Credits from "@/components/Credits.vue";
import Images from "@/components/Images.vue";
import ListingCarousel from "@/components/ListingCarousel.vue";
import Episodes from "@/components/Episodes.vue";
import { computed, ref,reactive } from "vue";
import { getTvShow, getTvShowRecommended } from "@/api";
import { useRoute } from "vue-router";
import { useDetails } from "@/hooks/useDetails";

const item = ref(null);
const recommended = ref(null);
const activeMenu = ref("overview");
const route = useRoute();
let detail = null



const metaTitle = computed(() => {
  if (item.value?.status === "Ended" && detail?.yearStart && detail?.yearEnd) {
    return `${detail?.name} (TV Series ${detail?.yearStart}-${detail?.yearEnd})`;
  } else if (detail?.yearStart) {
    return `${detail?.name} (TV Series ${detail?.yearStart}-)`;
  } else {
    return `${detail?.name} (TV Series)`;
  }
});

getTvShow(route.params.id).then((res) => {
  if (item.adult) {
    console.error({ message: "This tv show is not available" });
  } else {
    item.value = res;
    detail = useDetails(res);
  }
});

if (!recommended.value) {
  getTvShowRecommended(route.params.id).then((res) => {
    recommended.value = res.results;
  });
}

const navClicked = (label) => {
  activeMenu.value = label;
};

const showCredits = computed(() => {
  const credits = item.value?.credits;
  return credits && credits.cast && credits.cast.length;
});

const showEpisodes = computed(() => {
  return item.value?.number_of_seasons;
});

const showImages = computed(() => {
  const images = item.value?.images;
  return (
    images &&
    ((images.backdrops && images.backdrops.length) ||
      (images.posters && images.posters.length))
  );
});

const menu = computed(() => {
  const menu = ["Overview"];
  if (showEpisodes.value) menu.push("Episodes");

  if (showImages.value) menu.push("Photos");
  return menu;
});
</script>
